<template>
  <div class="app-container">
    <div class="user-man-top">
      <!-- 添加用户 -->
      <el-input
        v-model="form.query"
        placeholder="请输入内容"
      />
      <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      <el-button type="primary" @click="adduserItem=true">添加用户</el-button>
      <!-- <el-dialog v-model="dialogVisible" :rowvalue="rowInfo" />/ -->
      <add-user v-model="adduserItem" />
    </div>
    <!-- <app-card /> -->

    <!-- 内容 -->
    <template>
      <el-table
        :data="$store.state.user.userInfo.users"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="#" width="180" />
        <el-table-column prop="username" label="姓名" width="180" />
        <el-table-column prop="email" label="邮箱" />

        <el-table-column prop="mobile" label="电话" />

        <el-table-column prop="role_name" label="角色" />
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="editswitch($event,scope.row.id)"
            />
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
              slot="reference"
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            />
            <!-- 编辑组件 -->
            <el-dialog v-model="dialogVisible" :rule-form="rowInfo" />

            <!-- 删除 -->
            <el-button
              slot="reference"
              size="mini"
              icon="el-icon-delete "
              @click="open(scope.row.id)"
            />

            <!-- 分配 -->
            <el-button
              size="mini"
              type="danger"
              icon=" el-icon-s-tools"
              @click="handleDistribution(scope.$index, scope.row)"
            />
            <edit-user v-model="distributionVisible" :role="roleDistribution" :distribut="distributUserInfo" />
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- m内容 -->

    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="2"
      layout="total, sizes, prev, pager, next, jumper"
      :total="$store.state.user.userInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 分页 -->
  </div>
</template>

<script>
import ElDialog from '@/components/ElDialog/ElDialog.vue'
import { createNamespacedHelpers } from 'vuex'
import { editUserIdInfo, delUserItem } from '@/api/user.js'
import { getRoleList } from '@/api/authority'
import AddUser from '../componemts/AddUser.vue'
import EditUser from '../componemts/EditUser.vue'

const { mapActions: mapUserActions } = createNamespacedHelpers('user')

export default {
  components: { ElDialog, AddUser, EditUser },
  data() {
    return {

      currentPage: 1,
      dialogVisible: false, // 编辑
      rowInfo: {}, // 编辑传的用户信息
      delVisible: false, // 删除
      adduserItem: false, // 添加
      distributUserInfo: {}, // 分配角色列表
      roleDistribution: [], // 分配角色列表
      distributionVisible: false, // 分配
      // 分页
      form: {
        query: '',
        pagenum: 1,
        pagesize: 2
      }
    }
  },

  created() {
    this.getList()
  },

  methods: {
    ...mapUserActions(['getUserMan']),
    async getList() {
      await this.getUserMan(this.form)
    },

    // 打印分页数据
    handleSizeChange(val) {
      console.log(val)
      this.form.pagesize = val
      this.getUserMan(this.form)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.form.pagenum = val
      this.getUserMan(this.form)
    },

    // 编辑用户
    async  handleEdit(id, row) {
      this.dialogVisible = true
      this.rowInfo = row
    },

    // 修改用户的状态
    async   editswitch(val, id) {
      try {
        await editUserIdInfo(id, val)
        this.$message.success('修改状态成功')
      } catch (err) {
        console.log(err)
      }
    },

    // 删除用户
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delUserItem(id)
        this.getList()
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 分配列表
    async  handleDistribution(id, row) {
      console.log(row)
      this.distributionVisible = true
      this.distributUserInfo = row
      const res = await getRoleList()
      console.log(res)
      this.roleDistribution = res
    }
  }
}
</script>

<style scoped lang="scss">
.user-man-top {
  display: flex;
  justify-content: start;
  .el-input {
    width: 452px;
    margin-right: 20px;
  }
}
</style>
